<template>
	<view class="page">
		<div class="search-container">
			<div class="search-inner">
				<div class="search-pre-icon"><cl-icon color="#ffffff" name="search"></cl-icon></div>
				<input placeholder-style="color:#ffffff" class="search-ele" type="text" placeholder="输入城市/类别/资产等">
			</div>
		</div>

		<div class="banner-container">
			<cl-banner :list="list" type="card"></cl-banner>
		</div>

		<div class="grid-menu-container">
			<div class="grid-menu-item">
				<image class="grid-menu-item-icon" src="/static/menu/menu1.png"></image>
				<div>菜单</div>
			</div>
			<div class="grid-menu-item">
				<image class="grid-menu-item-icon" src="/static/menu/menu1.png"></image>
				<div>菜单</div>
			</div>
			<div class="grid-menu-item">
				<image class="grid-menu-item-icon" src="/static/menu/menu1.png"></image>
				<div>菜单</div>
			</div>
			<div class="grid-menu-item">
				<image class="grid-menu-item-icon" src="/static/menu/menu1.png"></image>
				<div>菜单</div>
			</div>
		</div>
		<div class="card-container">
			<div class="-left">
				<image class="-img" mode="aspectFill" src="https://admin.cool-js.com/uni/pages/demo/static/bg.png"></image>
			</div>
			<div class="-right">
				<div class="card-item"><image class="-img" mode="aspectFill"  src="https://admin.cool-js.com/uni/pages/demo/static/bg.png"></image></div>
				<div class="card-item"><image class="-img" mode="aspectFill" src="https://admin.cool-js.com/uni/pages/demo/static/bg.png"></image></div>
			</div>
		</div>
		<div class="tj-container">
			<div class="-title">
				<div class="-title-text">
					<span class="-title-text-text">精选内容</span>
				</div>
				<div class="-title-more">查看更多<cl-icon name="arrow-right"></cl-icon></div>
			</div>
			<div class="-inner-banner">
				<cl-banner radius="30rpx" :list="list" type="chain"></cl-banner>
			</div>
		</div>

	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	const list = ref([
		{
			url: 'https://admin.cool-js.com/uni/pages/demo/static/bg.png'
		},
		{
			url: 'https://admin.cool-js.com/uni/pages/demo/static/bg.png'
		},
		{
			url: 'https://admin.cool-js.com/uni/pages/demo/static/bg.png'
		}
	])
</script>

<style lang="scss">
	.search-container {
		background-color: #005fc6;
		padding: 30rpx 0;

		.search-inner {
			height: 60rpx;
			display: flex;
			align-items: center;
			width: calc(100% - 60rpx);
			margin-left: 30rpx;
			background-color: #ebb287;
			border-radius: 30rpx;

			.search-pre-icon {
				margin-left: 30rpx;
			}

			.search-ele {
				font-size: 26rpx;
				color: #ffffff;
				margin-left: 30rpx;
			}
		}
	}
	.banner-container{
		margin-top: 20rpx;
	}
	.grid-menu-container{
		width: 100%;
		display: flex;
		justify-content: space-between;
		background-color: #FBFBFB;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		.grid-menu-item{
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 28rpx;
			.grid-menu-item-icon{
				width: 100rpx;
				height: 100rpx;
				margin-bottom: 12rpx;
			}
		}
		.grid-menu-item:nth-child(4){
			margin-right: 30rpx;
		}
		.grid-menu-item:nth-child(1){
			margin-left: 30rpx;
		}
	}
	.card-container{
		width: 100%;
		display: flex;
		padding-top: 30rpx;
		border-radius: 20rpx;
		background-color: #FBFBFB;
		margin-top: 30rpx;
		.-left{
			width: 324rpx;
			height: 412rpx;
			background-color: #ccc;
			border-radius: 20rpx;
			overflow: hidden;
			margin-left: 30rpx;
		}
		.-right{
			display: flex;
			flex-direction: column;
			margin-left: 40rpx;
			.card-item{
				width: 330rpx;
				height: 188rpx;
				background-color: #ccc;
				margin-bottom: 40rpx;
				border-radius: 20rpx;
				overflow: hidden;

			}
		}
	}

</style>
